div {
    margin: 0;
    padding: 0;
    overflow: -moz-scrollbars-vertical;
}

.title_img {
    width: 100%;

}

/*常见banner部分的动画效果*/
.loop-wrap {
    position: relative;
    width: 400px;
    height: 150px;
    margin: auto;
    overflow: hidden;

}

.loop-images-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
    transform: translate(0, 0);
    animation: loop 20s linear infinite alternate;
}

.loop-image {
    width: 400px;
    height: 150px;
}

/* 创建loop动画规则 */
/*
   轮播5张，总耗时10s，单张应为2s(20%)
   单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(0, 0);
    }
    /* 停留1500ms */

    20% {
        transform: translate(-20%, 0);
    }
    /* 切换500ms 位移-20% */
    35% {
        transform: translate(-20%, 0);
    }

    40% {
        transform: translate(-40%, 0);
    }
    55% {
        transform: translate(-40%, 0);
    }

    60% {
        transform: translate(-60%, 0);
    }
    75% {
        transform: translate(-60%, 0);
    }

    80% {
        transform: translate(-80%, 0);
    }
    95% {
        transform: translate(-80%, 0);
    }

    100% {
        transform: translate(-80%, 0);
    }
    /* 复位到第一张图片 */
}

/*link 部分样式*/
.cartitem, .nav {
    overflow: auto;
    margin: 0 10px;
}

.cartitem a, .nav a {
    width: 25%;
    float: left;
    text-align: center;
    padding: 5px 0 5px 0;
}

.cartitem i, .nav i {
    width: 40px;
    height: 40px;
    display: block;
    /* text-align: center; */
    margin: 0 auto 5px auto;
    vertical-align: middle;
}

.cartitem span, .nav span {
    font-size: 0.85em;
    color: #2b2b2b;
    display: block;
}

.cartitem a:nth-child(1) i {
    background: url(/images/m/icon/近期活动.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(2) i {
    background: url(/images/m/icon/yuyue.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(3) i {
    background: url(/images/m/icon/余额.jpg) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(4) i {
    background: url(/images/m/icon/在线充值.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(5) i {
    background: url(/images/m/icon/订购服务.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(6) i {
    background: url(/images/m/icon/优秀活动.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(7) i {
    background: url(/images/m/icon/用车小知识.png) no-repeat center;
    background-size: 40px 40px;
}

.cartitem a:nth-child(8) i {
    background: url(/images/m/icon/关于我们.png) no-repeat center;
    background-size: 40px 40px;
}

/*活动栏样式*/
.activity {
    overflow: hidden;
    margin: 0 0 60px 0;
}

.activity a {
    width: 48%;
    float: left;
    text-align: center;
    padding: 5px 0 5px 0;
}

.activity i {
    width: 200px;
    height: 150px;
    display: block;
    /* text-align: center; */
    margin: 0 auto 5px auto;
    vertical-align: middle;
}

.activity span {
    font-size: 0.8em;
    color: #aaa9a9;
    display: block;
}

.activity a:nth-child(1) i {
    background: url(/images/m/serviceInfo/11.jpg) no-repeat center;
    background-size: 200px 150px;
}

.activity a:nth-child(2) i {
    background: url(/images/m/serviceInfo/8.jpg) no-repeat center;
    background-size: 200px 150px;
}

.activity a:nth-child(3) i {
    background: url(/images/m/serviceInfo/9.jpg) no-repeat center;
    background-size: 200px 150px;
}

.activity a:nth-child(4) i {
    background: url(/images/m/serviceInfo/15.jpg) no-repeat center;
    background-size: 200px 150px;
}

/*导航栏部分图标*/
.nav i {
    width: 40px;
    height: 30px;
    display: block;
    /* text-align: center; */
    margin: 0 auto 5px auto;
    vertical-align: middle;
}

.nav a:nth-child(1) i {
    background: url(/images/m/icon/首页.png) no-repeat center;
    background-size: 40px 30px;
}

.nav a:nth-child(2) i {
    background: url(/images/m/icon/服务.png) no-repeat center;
    background-size: 40px 30px;
}

.nav a:nth-child(3) i {
    background: url(/images/m/icon/购物车.png) no-repeat center;
    background-size: 40px 30px;
}

.nav a:nth-child(4) i {
    background: url(/images/m/icon/个人中心.png) no-repeat center;
    background-size: 40px 30px;
}

.nav {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0;
    background: #ffffff;
}

.nav a:hover {
    font-weight: bolder;
}

/* for 400px or less */
@media screen and (max-width: 380px) {
    .loop-image {
        width: 374px;
    }

    .loop-wrap {
        width: 374px;
    }

}



